<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ include file="/jsp/common.jsp"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/admin_content.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/jquery-ui-1.10.3.custom.min.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui-1.10.3.custom.min.js"></script>
<title>Report Management</title>
</head>

<body>
	<h1>Report Management</h1>
	<div id="formView">
		<div class="title">View Report</div>
		<div class="content" align="center">
			<s:form id="form1" action="viewReport" method="post" validate="true">
				<s:textfield id="startDatePicker" cssClass="textfield" name="startDate" label="From Date" size="20" requiredLabel="true" />
				<s:textfield id="endDatePicker" cssClass="textfield" name="endDate" label="To Date" size="20" requiredLabel="true" />
				<s:submit id="button" value="View" />
			</s:form>
		</div>
	</div>

	<div id="list">
		<div class="title">Report</div>
		<div class="content" align="center">
			<table border="1">
				<tr id="tableTitle">
					<th>&nbsp; No.</th>
					<th>&nbsp; Date</th>
					<th>&nbsp; Amount Of Orders</th>
					<th>&nbsp; Grand Total ($)</th>
				</tr>
				<s:iterator value="listReport" var="report" status="itStatus">
					<tr id="<s:property value="date"/>">
						<td align="center"><s:property value="#itStatus.Count" /></td>
						<td><s:date name="date" format="dd/MM/yyyy" /></td>
						<td align="center"><s:property value="amountOrder" /></td>
						<td><s:property value="grandTotal" /></td>
				</s:iterator>
			</table>
		</div>
		<div class="content" align="right">
			<s:form id="form2" action="css/admin_content.css" method="get">
				<s:submit id="button" value="Export" />
			</s:form>
		</div>
	</div>
	
	<!-- Javascript -->
	<script>
		$(function() {
			$("#startDatePicker").datepicker({
				onClose: function( selectedDate ) {
			        $("#endDatePicker").datepicker( "option", "minDate", selectedDate );
				}
			});
			$("#endDatePicker").datepicker({
				onClose: function( selectedDate ) {
			        $("#startDatePicker").datepicker( "option", "maxDate", selectedDate );
				}
			});
	  	});
	</script>
</body>
</html>